<template>
    <view class="content">
        <view class="mart-30">
            <view class="commit-title">钢丝绳信息</view>
            <view class="topContent readBox" v-if="thisData">
                <u-read-more ref="uReadMore" :showHeight="200" closeText="查看更多" :toggle="true" @open="readMoreChange" @close="readMoreChange">
                    <u-row gutter="0" class="marb-20">
                        <u-col span="4" textAlign="center">
                            <text class="label-name">钢丝绳编码</text>
                        </u-col>
                        <u-col span="8">
                            <DataSelect :disabled="!isEdit || thisID != null" class="w-100" table="Stock" action="GetSearchs" :filter="{ _IsOut: false }" label="code" value="autoID" :obj.sync="stockObj" :id.sync="thisData.stockID" :name.sync="thisData.stock_code"> </DataSelect>
                        </u-col>
                    </u-row>

                    <u-line class="marb-20"></u-line>
                    <u-row gutter="0" class="marb-20">
                        <u-col span="4" textAlign="center">
                            <text class="label-name">钢丝绳名称</text>
                        </u-col>
                        <u-col span="6">
                            <text class="label-name">{{ stockObj.name }}</text>
                        </u-col>
                    </u-row>

                    <u-line class="marb-20"></u-line>
                    <u-row gutter="0" class="marb-20">
                        <u-col span="4" textAlign="center">
                            <text class="label-name">规格型号</text>
                        </u-col>
                        <u-col span="6">
                            <text class="label-name">{{ stockObj.guiGe }}</text>
                        </u-col>
                    </u-row>

                    <u-line class="marb-20"></u-line>
                    <u-row gutter="0" class="marb-20">
                        <u-col span="4" textAlign="center">
                            <text class="label-name">直径</text>
                        </u-col>
                        <u-col span="6">
                            <text class="label-name">{{ stockObj.diameter }}</text>
                        </u-col>
                    </u-row>

                    <u-line class="marb-20"></u-line>
                    <u-row gutter="0" class="marb-20">
                        <u-col span="4" textAlign="center">
                            <text class="label-name">长度</text>
                        </u-col>
                        <u-col span="6">
                            <text class="label-name">{{ stockObj.lengthNum }}</text>
                        </u-col>
                    </u-row>

                    <u-line class="marb-20"></u-line>
                    <u-row gutter="0" class="marb-20">
                        <u-col span="4" textAlign="center">
                            <text class="label-name">绳子条数</text>
                        </u-col>
                        <u-col span="6">
                            <text class="label-name">{{ stockObj.cnt }}</text>
                        </u-col>
                    </u-row>

                    <u-line class="marb-20"></u-line>
                    <u-row gutter="0" class="marb-20">
                        <u-col span="4" textAlign="center">
                            <text class="label-name">供应商</text>
                        </u-col>
                        <u-col span="6">
                            <text class="label-name">{{ stockObj.supplierName }}</text>
                        </u-col>
                    </u-row>

                    <u-line class="marb-20"></u-line>
                    <u-row gutter="0" class="marb-20">
                        <u-col span="4" textAlign="center">
                            <text class="label-name">制造商</text>
                        </u-col>
                        <u-col span="6">
                            <text class="label-name">{{ stockObj.producerName }}</text>
                        </u-col>
                    </u-row>

                    <u-line class="marb-20"></u-line>
                    <u-row gutter="0" class="marb-20">
                        <u-col span="4" textAlign="center">
                            <text class="label-name">维保周期</text>
                        </u-col>
                        <u-col span="6">
                            <text class="label-name">{{ stockObj.keepDay }}</text>
                        </u-col>
                    </u-row>

                    <u-line class="marb-20"></u-line>
                    <u-row gutter="0" class="marb-20">
                        <u-col span="4" textAlign="center">
                            <text class="label-name">入库日期</text>
                        </u-col>
                        <u-col span="6">
                            <text class="label-name" v-if="thisID != null">{{ (thisData.billModel && thisData.billModel.confirmDate) | ymd }}</text>
                            <text class="label-name" v-else>{{ stockObj.billModel && stockObj.billModel[0].confirmDate | ymd }}</text>
                        </u-col>
                    </u-row>
                </u-read-more>
            </view>
        </view>
        <view class="mart-30">
            <view class="commit-title">维保信息</view>
            <view class="topContent">
                <u--form ref="uForm" :model="thisData" :rules="rules" label-width="120" labelAlign="center" :disabled="!isEdit">
                    <u-form-item label="实施单位" borderBottom prop="companyName" class="relativeCol">
                        <view class="w-100">
                            <u-input v-model="thisData.companyName" :disabled="!isEdit" placeholder="请输入实施单位" />
                        </view>
                    </u-form-item>
                    <u-form-item label="实施人员" borderBottom prop="userName" class="relativeCol">
                        <view class="w-100">
                            <u-input v-model="thisData.userName" :disabled="!isEdit" placeholder="请输入实施人员"> </u-input>
                        </view>
                    </u-form-item>
                    <u-form-item label="实施日期" :required="true" borderBottom prop="doDate" class="relativeCol">
                        <view class="w-100">
                            <uni-datetime-picker :disabled="!isEdit" type="date" v-model="thisData.doDate" @onShow="onPreviewShow" @onClose="onPreviewHide" />
                        </view>
                    </u-form-item>
                    <u-form-item label="实施备注" borderBottom prop="remark" class="relativeCol">
                        <view class="w-100">
                            <u-input :disabled="!isEdit" v-model="thisData.remark" type="textarea" placeholder="请输入备注"> </u-input>
                        </view>
                    </u-form-item>
                    <u-form-item label="实施照片" borderBottom>
                        <view class="w-100">
                            <Upload ref="picUploadRef" :disabled="!isEdit" v-model="thisData.pic_ImgsList" :limit="30" @onPreviewShow="onPreviewShow" @onPreviewHide="onPreviewHide"></Upload>
                        </view>
                    </u-form-item>
                    <u-form-item label="附件" borderBottom>
                        <view class="w-100">
                            <Upload ref="attrUploadRef" :disabled="!isEdit" v-model="thisData.attr_ImgsList" :limit="30" @onPreviewShow="onPreviewShow" @onPreviewHide="onPreviewHide"></Upload>
                        </view>
                    </u-form-item>
                </u--form>
                <view class="mart-30" v-show="isEdit">
                    <u-row justify="center">
                        <u-col span="6">
                            <u-button type="primary" @click="submit">保存</u-button>
                        </u-col>
                    </u-row>
                </view>
            </view>
        </view>

        <u-toast ref="uToast"></u-toast>
    </view>
</template>

<script>
export default {
    data() {
        return {
            isEdit: true,
            thisID: null,
            thisData: {
                userName: getApp().globalData.name,
                doDate: this.$gx.GetDateTime(),
            },
            rules: {
                doDate: [
                    { required: true, message: "实施日期", trigger: ["blur", "change"] },
                    {
                        validator: () => {
                            this.$nextTick(() => {
                                uni.$emit("refreshUpload");
                            });
                        },
                        trigger: ["blur", "change"],
                    },
                ],
            },
            codeObj: {},
            stockObj: {},
        };
    },
    //生命周期-加载
    onLoad: function (option) {
        let that = this;
        // #ifdef APP-NVUE
        const eventChannel = this.$scope.eventChannel; // 兼容APP-NVUE
        // #endif

        // #ifndef APP-NVUE
        const eventChannel = this.getOpenerEventChannel();
        // #endif
        eventChannel.on("editData", function (data) {
            let type = 0;
            that.isEdit = true;
            if (data.operateType == "编辑") type = 1;
            if (data.operateType == "详情") {
                (type = 3), (that.isEdit = false);
            }
            that.init(data.data, type);
        });
    },
    onReady() {
        //如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
        this.$nextTick(() => {
            this.$refs.uForm.setRules(this.rules);
        });
    },
    methods: {
        codeChange() {
            let codeObj = this.codeObj;
            if (Object.keys(codeObj).length < 1) {
                this.setRopeData("");
                return;
            }
            this.setRopeData(codeObj);
        },
        setRopeData(data) {
            let hasCol = ["code", "stockID", "name", "guiGe", "diameter", "nianJu", "lengthNum", "cnt", "mpaID", "mpaName", "surfaceStatusID", "surfaceStatusName", "twistingTypeID", "twistingTypeName", "departmentID", "departmentName", "installAddressID", "installAddressName", "hoisterID", "hoisterName", "hoisterUsageID", "hoisterUsageName", "wireropeTypeID", "wireropeTypeName", "remark"];
            hasCol.map((x) => {
                if (data == "") {
                    this.$set(this.thisData, x, "");
                } else {
                    this.$set(this.thisData, x, data[x]);
                }
            });
        },
        init(data, type) {
            // type1编辑0添加
            if (data.stockWireropeKeepID) {
                this.thisID = data.stockWireropeKeepID;
                this.$app.CallApi(this.$app.api.StockWireropeKeep.GetByID(this.thisID), {
                    success: (res) => {
                        this.thisData = res;
                        this.stockObj = res.stockModel;
                        this.thisData.stock_code = res.stockModel.code;
                    },
                });
            }
        },
        submit() {
            this.$refs.uForm
                .validate()
                .then((res) => {
                    console.log(this.thisData);
                    if (this.$gx.IsEmpty(this.thisData.stockID)) {
                        this.$refs.uToast.show({ type: "error", title: "", message: "请选择钢丝绳！" });
                        return;
                    }

                    let apiFun = this.$app.api.StockWireropeKeep.Insert;
                    if (this.thisID) {
                        apiFun = this.$app.api.StockWireropeKeep.Update;
                    }

                    this.$app.CallApi(apiFun, {
                        data: this.thisData,
                        success: (res) => {
                            this.$refs.uToast.show({
                                type: "success",
                                title: "",
                                message: "保存成功！",
                                complete: () => {
                                    uni.navigateBack();
                                    uni.$emit("refreshData");
                                },
                            });
                        },
                    });
                })
                .catch((errors) => {});
        },
        //文件预览开启
        onPreviewShow() {
            this.$refs.picUploadRef.setReadOnly(true);
            this.$refs.attrUploadRef.setReadOnly(true);
        },
        //文件预览关闭
        onPreviewHide() {
            this.$refs.picUploadRef.setReadOnly(false);
            this.$refs.attrUploadRef.setReadOnly(false);
        },
        readMoreChange() {
            uni.$emit("refreshUpload");
        },
    },
};
</script>

<style></style>
